<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap-3.3.7.css">
    <script src="./js/vue-2.4.0.js"> </script>
    <script src="./js/vue-resource-1.3.4.js"> </script>
    <script src="./js/vue-router-3.0.1.js"> </script>
</head>
<body>
        <a href="./路由.html">路由</a>
        <a href="./component.html">组件</a>
        <div id="app2">
                <hr>
                <p>这里开始是 transition动画的切换</p>
                <hr>
                <a href="#" class="btn btn-primary active" @clicl.prevent>注册</a>
                <a href="#" class="btn btn-primary active" @clicl.prevent>登录</a>
                <br/>
                <div style="height:300px;"></div>
                <div class="container">
                    <div class="btn-group">
                        <button class="btn btn-info">这里是bootstrap</button>
                        <button class="btn btn-danger">这里是bootstrap</button>
                        <input type="button" value="这里是测试bootstrap2" class="btn btn-default">
                    </div>
                </div>
               
                
                <p class="text-muted">这里是测试文字颜色</p>
                <p class="text-primary">这里是测试文字颜色</p>
                <p class="text-info">这里是测试文字颜色</p>
                <p class="text-danger">这里是测试文字颜色</p>
            
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
        
                <p class="info">下面是表格bootstrap</p>
        
        
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>删除</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  v-for="(item,i) in table" :key="item.id" >
                            <td v-text="item.id"></td>
                            <td v-text="item.name"></td>
                            <td v-text="item.gender"></td>
                            <td v-text="item.age"></td>
                            <td ><a href="" class="" @click.prevent="delThis(item.id)">删除</a></td>
                        </tr>
                    </tbody>
                    
                </table>
                <temp-login :prop-value1="sdt" @fun11="consoleFun" @fun12="con2"></temp-login>   
                <!-- <component :is="'tempLogin'" :propValue="sdt" @fun12="con2"></component> -->
                <!-- 将原先 temp-login 中绑定的数据拿到compent中即可 -->
            </div>
        
    <!-- <input type="button" value="hello world" id="app"> -->
    <div id="app">

        
            <div class="from-group">
                    <span class="label label-danger">请输入被加数</span>
                    <input type="number" v-model="add1">
                    <select name="" id="" v-model="calcSel">
                        <option value="+">+</option>
                        <option value="-">-</option>
                        <option value="x">x</option>
                        <option value="/">/</option>
                    </select>
                    <span class="label label-danger">请输入加数</span>
                    <input type="number" v-model="add2">
                    <input type="button" value="=" @click="calc">
                    <span class="label label-danger">结果</span>
                    <input type="number" v-model="result" disabled="true"> 
                </div>   


        <div class="navbar navbar-inverse">
            <a class="navbar-brand" href="#">Title</a>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </div>
        <input type="button" value="start" @click="start">
        <input type="button" value="stop" @click="stop">
        <form action="" method="POST" role="form">

                <input type="date" v-model="date">
                <input type="email" placeholder="email" class="form-control">
                <input type="radio" placeholder="radio">
                <input type="range" placeholder="range" v-model="range">
                <input type="reset" placeholder="reset">
                <input type="search" placeholder="search">
                <input type="tel" placeholder="tel">
                <input type="time" placeholder="time" v-model="time">
                <input type="url" placeholder="url">
                <input type="week" placeholder="week">


       

            
        </form>
       
    </div>
    


    <template id="temp-login">
        <div>
            <div class="container">
                <slot></slot>
                <button class="btn" @click="consoleTittle">点击输出propsValue---{{propValue1}}</button>
                <!-- <button class="btn" @click="cl2">点击执行父组件的方法</button> -->
                <!-- <button class="btn" @click="cSdt">点击输出父组件的sdt props值</button> -->
                <!-- <button class="btn" @click="c13">点击调用父组件的变量--{{tt}}</button> -->
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
                        {{tb.tittle}}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li class="dropdown-header">请选择</li>
                        <li v-for="(item,i) in tb.body" :key="item.value" @click.prevent="changeTb(item.value)"><a href="#" role="menuitem">{{item.value}}</a></li>
                    </ul>
                </div>

                <!-- <div>{{title}}</div> -->
            </div>
        </div>
    </template>


</body>
<script src="./js/main.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    </html>